<script setup lang="ts">
import { useStage } from '@/store/stage';
import { ColorObject, StopObject, SvgColor } from '@/objects/Color'
import { ref, reactive, computed } from 'vue';

import { StageObject } from '@/objects/StageObject';
import ColorPicker from './form/ColorPicker.vue';
const { currentObject } = useStage();
const colorBlock = ref<HTMLElement>()
const colorIndex = ref(-1)
const showColor = ref(false)

const mouse = reactive({
    down: false,
    move: false,
    x: 0,
    y: 0,
})

function addColor(e: MouseEvent) {
    const rect = colorBlock.value?.getBoundingClientRect();
    if (!rect || !currentObject.child) {
        return
    }
    const val = Math.round(e.offsetX / rect.width * 100);
    const color = new StopObject();
    color.offset = val;
    color.stopColor = new SvgColor();
    currentObject.child.children.push(color);
    //排序
    const temp: number[] = [];
    const ar: StageObject[] = []
    currentObject.child.children.forEach(stop => {
        temp.push(stop.getValue('offset'));
        ar.push(stop);
    })
    currentObject.child.children = [];
    temp.sort();
    for (const t of temp) {
        for (const c of ar) {
            if (t === c.getValue('offset')) {
                currentObject.child.children.push(c);
                continue;
            }
        }
    }
}

const curColor = computed(() => {
    if (currentObject.child instanceof SvgColor) {
        return currentObject.child.getValue('value');
    }
    const s = currentObject.child?.children[colorIndex.value];
    if (s) {
        return s.getValue('stopColor').value;
    } else {
        return '#000'
    }
})

function setColor(e: MouseEvent, index: number) {
    if (e.button === 0) {
        colorIndex.value = index;
        mouse.down = true;
    } else if (e.button === 2) {
        //删除
        colorIndex.value = -1;
        currentObject.child?.children.splice(index, 1);
    }
}
function setColorVal(cssColor: string) {

    if (currentObject.child instanceof SvgColor) {
        Reflect.set(currentObject.child, 'value', cssColor);
        return
    }
    const stop = currentObject.child?.children[colorIndex.value];

    if (!stop) {
        return
    }
    Reflect.set(stop, 'stopColor', new SvgColor(cssColor));

}

</script>
<template>
    <div class="color" v-if="(currentObject.child instanceof ColorObject)">
        <div v-show="!(currentObject.child instanceof SvgColor)" ref="colorBlock" class="color-block"
            :style="{ background: currentObject.child.getValue('cssColor') }" @click.self="addColor" title="点击设置颜色">
            <span v-for="(s, i) in currentObject.child.children" :key="i"
                :style="{ left: s.getValue('offset') + '%', backgroundColor: s.getValue('stopColor') }"
                @mousedown.stop="setColor($event, i)" @mouseup.stop="showColor = true" title="右键删除">
            </span>
        </div>
        <p v-show="(currentObject.child instanceof SvgColor)" class="none-color">
            单色不需要在此设置
        </p>
        <ColorPicker :cur-color="curColor" :show-color="showColor" @set-color-val="setColorVal"
            @close-picker="showColor = false" />
    </div>
    <p v-else class="none-color none-object">
        请选择画笔或填充对象
    </p>
</template>
<style scoped>
.color,.none-object {
    padding-top: 1rem;
}

.color-block {
    position: relative;
    height: 3rem;
    border: solid 1px gray;
    cursor: pointer;
}

.color-block span {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 0.5rem;
    height: 1rem;
    background: #000;
    outline: solid 1px #fff;
    transform: translateX(-25%);

}

.btn {
    cursor: pointer;
    user-select: none;
    color: #242424;
}

.simple-color {
    text-align: center;
}

.simple-color span {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    outline: dashed 1px rgb(162, 162, 162);
}

.none-color{
    text-align: center;
    font-size: 0.8rem;
    color: #b0afaf;
}
</style>